<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:richfaces="http://richfaces.ajax4jsf.org/rich">
    <body>
        <ui:composition template="./main-template.xhtml">
            <ui:param name="titulo" value="Informacion Detallada de un Mueble" />
            <ui:define name="body">
                <a4j:form>
                    <table width="800px">
                        <tr>
                            <td colspan="3" align="right">
                                <a4j:commandLink action="#{CatalogBean.menu}" value="Regresar a la lista de productos">
                                    <f:param name="menu" value="lista"/>
                                </a4j:commandLink>
                            </td>
                        </tr>
                    </table>
                    <rich:panel style="width:797px">
                        <f:facet name="header" >
                            Detalle del catalogo de producto
                        </f:facet>

                        <table width="770px">
                            <tr>
                                <td rowspan="10">
                                    <h:graphicImage id="foto1" value="img/img4.png" width="128px" height="128px" />
                                    <rich:paint2D data="#{CatalogBean.mueble.foto}" />
                                    <br/>
                                    <rich:fileUpload id="subirArchivo"
                                                     required="true"
                                                     fileUploadListener="#{CatalogBean.subirArchivo}"
                                                     acceptedTypes="jpg,bmp,png" alt="Subir archivo" ajaxSingle="true"
                                                     maxFilesQuantity="10" immediateUpload="true" listWidth="150px"
                                                     listHeight="1px" cancelEntryControlLabel="Cancelar"
                                                     clearAllControlLabel="Borrar"
                                                     clearControlLabel="Eliminar">
                                        <a4j:support  ajaxSingle="true" event="onuploadcomplete" reRender="foto1" />
                                    </rich:fileUpload>
                                </td>
                            </tr>
                            <tr align="left">
                                <td>

                                    Nombre:<br/>
                                    <h:inputText  value="#{CatalogBean.mueble.nombre}"/>
                                </td>

                                <td>
                                    Tipo de mueble:<br/>
                                    <h:selectOneMenu  value="#{CatalogBean.mueble.tipo}">
                                        <f:selectItems value="#{CatalogBean.tiposMuebles}" />
                                    </h:selectOneMenu>
                                </td>
                                <td>
                                    Referencia:<br/>
                                    <h:inputText value="#{CatalogBean.mueble.referencia}" />
                                </td>
                            </tr>
                            <tr align="left">
                                <td colspan="3">
                                    Descripcion:<br/>
                                    <h:inputTextarea  value="#{CatalogBean.mueble.descripcion}" rows="2" style="width:200px" />
                                </td>
                            </tr>
                            <tr align="left">
                                <td>
                                    Alto:<br/>
                                    <h:inputText value="#{CatalogBean.mueble.alto}" />
                                </td>
                                <td>
                                    Ancho:<br/>
                                    <h:inputText value="#{CatalogBean.mueble.ancho}" />
                                </td>
                                <td>
                                    Profundidad:<br/>
                                    <h:inputText value="#{CatalogBean.mueble.profundidad}" />
                                </td>
                            </tr>
                            <tr align="left">
                                <td>
                                    Peso:<br/>
                                    <h:inputText value="#{CatalogBean.mueble.peso}" />
                                </td>
                                <td>
                                    Color:<br/>
                                    <h:inputText value="#{CatalogBean.mueble.color}" />
                                </td>
                                <td>
                                    Material:<br/>
                                    <h:inputText value="#{CatalogBean.mueble.material}" />
                                </td>
                            </tr>
                            
                        </table>
                    </rich:panel>
                    <table>
                        <tr>
                            <td><a4j:commandButton value="Guardar" action="#{CatalogBean.save}" /></td>                            
                            <td><a4j:commandButton reRender="mensaje" id="eliminar" value="Eliminar"  action="#{CatalogBean.delete}" >
                                    <rich:componentControl  for="confirmation" attachTo="eliminar" operation="show" event="onclick" disableDefault="true"/>
                                    <a4j:support  ajaxSingle="true" event="onuploadcomplete" reRender="mensaje" />
                                </a4j:commandButton>
                            </td>
                        </tr>
                    </table>
                    <rich:modalPanel id="confirmation" width="300" height="150">
                        <f:facet name="header">Confirmation</f:facet>
                        <h:panelGrid columns="2">
                            <h:graphicImage  value="/img/Alert.jpg" />
                            <h:outputText  id="mensaje" value="#{CatalogBean.mensaje}"  />
                        </h:panelGrid>
                        <h:panelGrid columns="6" >
                            <a4j:commandButton action ="#{CatalogBean.eliminar}"  style="#{CatalogBean.noeliminar}width:50px"  id="salvar"  value="Eliminar"   >
                                <rich:componentControl for="confirmation" attachTo="salvar" operation="hide" event="onclick" disableDefault="true"  />
                            </a4j:commandButton>
                            <a4j:commandButton style="width:50px" id="cancelar" value="Cancelar" >
                                <rich:componentControl for="confirmation" attachTo="cancelar" operation="hide" event="onclick" disableDefault="true"/>
                            </a4j:commandButton>
                        </h:panelGrid>
                    </rich:modalPanel>

                </a4j:form>
            </ui:define>
        </ui:composition>
    </body>
</html>
